<template>
  <plain-page>
    <el-card>
      <el-calendar>
        <template v-slot:dateCell="{date, data}">
          <span>
            {{ +data.day.split('-')[2] }}
          </span>
        </template>
      </el-calendar>
    </el-card>
  </plain-page>
</template>

<script>
export default {
  pageProps: {
    title: '日历'
  }
}
</script>

<style scoped>
.plain-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.el-card {
  margin: 0px auto;
  width: 600px;
  position: relative;
  top: -73px;
}

>>> .el-calendar-day {
  height: 66px;
  line-height: 50px;
  text-align: center;
}

>>> .el-calendar-table td {
  border-radius: 4px;
  border: none !important;
}
>>> .el-calendar-table .is-today {
  background: rgb(102, 177, 255);
  color: #fff;
}
>>> .el-calendar-table .is-selected {
  background: rgb(179, 216, 255);
  color: #fff;
}
</style>